<template>
	<div @click="toggle">
		<svg-icon
			class="svg-icon"
			:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
			:style="{ width: size + 'px', height: size + 'px' }"
		/>
	</div>
</template>

<script setup lang="ts">
/**
 * vueUse 全屏
 */
const { isFullscreen, toggle } = useFullscreen();

defineProps({
	size: {
		type: Number
	}
});
</script>

<style lang="scss" scoped>
.screenfull-svg {
	display: inline-block;
	cursor: pointer;
	fill: #5a5e66;
	width: 20px;
	height: 20px;
	vertical-align: 10px;
}
</style>
